<template>
  <div class="update-cont">
      <h2>引导页图片<span class="title-txt">（最多可以上传6张）</span>：</h2>
    <a-upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      listType="picture-card"
      :fileList="fileList"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < 6">
        <a-icon type="plus" />
        <div class="ant-upload-text">点击上传</div> 
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
export default {
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [],
    }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
  },
}
</script>
<style lang='scss' scoped='' type="text/css">
    .update-cont{
        padding: 20px;
        .ant-upload-select-picture-card i {
            font-size: 32px;
            color: #999;
        }

        .ant-upload-select-picture-card .ant-upload-text {
            margin-top: 8px;
            color: #666;
        }
        .title-txt{
            font-size: 14px;
            color: #666;
        }
    }
  
</style>